<template>
  <div>
      <el-row>
      <el-col :span="12">
    <div>
      <el-card class="box-card">
        <div slot="header" class="clearfix;">
          <el-button style="float: left; padding: 3px 0" type="text"
            >节假日设置</el-button
          >
        </div>
        <div v-show="isShow1 == true">
          <tr>
            <td>年份：</td>
            <td>
              <el-select
                v-model="year1"
                placeholder="请选择"
              >
                <el-option :label="2017" :value="2017"></el-option>
                <el-option :label="2018" :value="2018"></el-option>
                <el-option :label="2019" :value="2019"></el-option>
                <el-option :label="2020" :value="2020"></el-option>
                <el-option :label="2021" :value="2021"></el-option>
                <el-option :label="2022" :value="2022"></el-option>
              </el-select>
            </td>
            <td>
              <el-button type="primary" @click="GetHolidaySettingsPo()" >查询</el-button>
            </td>
          </tr>
        </div>
      </el-card>
    </div>

    <div>
      <el-card class="box-card">
        <div slot="header" class="clearfix;">
          <el-button style="float: left; padding: 3px 0" type="text"
            >日期列表</el-button
          >
        </div>
        <div v-show="isShow2 == true">
            <tr>
                <td>选择日期</td>
                <td><el-input  v-model="date" type="date"></el-input></td>
                <td>   <el-button type="primary" @click="AddHolidaySeason()">添加节假日</el-button> <el-button @click="AddSpecialWorkingDay()" type="primary">添加特殊工作日</el-button></td>
            </tr> 
            <el-row>
                <el-col :span="12">
          <el-table
    :data="tableData"
    border
    style="width: 100%" >
    <el-table-column
      label="节假日"
      width="150" >
      <template slot-scope="scope">
       {{scope.row.holiday_season.substr(0,10)}}
      </template>
    </el-table-column>
     <el-table-column
      label="操作"
      width="150" >
      <template slot-scope="scope">
      <el-button type="danger" @click="DeleteHolidaySettingsPo(scope.row.id)"  >删除</el-button>
      </template>
    </el-table-column>
  </el-table> </el-col>
    <el-col :span="12">
          <el-table
    :data="tableData2"
    border
    style="width: 100%" >
    <el-table-column
      label="特殊工作日"
      width="150" >
      <template slot-scope="scope">
       {{scope.row.special_working_day.substr(0,10)}}
      </template>
    </el-table-column>
     <el-table-column
      label="操作"
      width="150" >
      <template slot-scope="scope">
      <el-button type="danger" @click="DeleteHolidaySettingsPo(scope.row.id)" >删除</el-button>
      </template>
    </el-table-column>
  </el-table> </el-col>
   </el-row>
        </div>
      </el-card>
    </div>
    </el-col>
    <el-col :span="12">
    <div>
      <el-card class="box-card">
        <div slot="header" class="clearfix;">
          <el-button style="float: left; padding: 3px 0" type="text"
            >查询条件</el-button
          >
        </div>
        <div v-show="isShow1 == true">
          <tr>
            <td>部门</td>
            <td>
               <el-select v-model="depname"  placeholder="全部">
               <el-option
                v-for="item in drop_down"
                :key="item"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
            </td>
            <td>年份</td>
            <td>
              <el-select
                v-model="year2"
                placeholder="请选择"
              >
                <el-option :label="2017" :value="2017"></el-option>
                <el-option :label="2018" :value="2018"></el-option>
                <el-option :label="2019" :value="2019"></el-option>
                <el-option :label="2020" :value="2020"></el-option>
                <el-option :label="2021" :value="2021"></el-option>
                <el-option :label="2022" :value="2022"></el-option>
              </el-select>
            </td>
            <td>
              <el-button type="primary" @click="GetAnnualLeaveSetPo()" >查询</el-button>
            </td>
          </tr>
        </div>
      </el-card>
    </div>

    <div>
      <el-card class="box-card">
        <div slot="header" class="clearfix;">
          <el-button style="float: left; padding: 3px 0" type="text"
            >查询结果</el-button
          >
          <el-button @click="UpdateAnnualLeaveSetPo()"  style="float:right; padding: 3px 0;color:red" type="text"
            >保存</el-button
          >
        </div>
        <div v-show="isShow2 == true">
          <el-table
    :data="tableData3"
    border
    style="width: 100%" >
     <el-table-column
      prop="id"
      label="编号"
      width="120">
    </el-table-column> 
     <el-table-column
      prop="name"
      label="姓名"
      width="120">
    </el-table-column>
     <el-table-column
      label="年假天数"
      width="120">
      <template slot-scope="scope"> 
       <el-input v-model="scope.row.annual_leave_days"></el-input>
      </template>
    </el-table-column>
  </el-table>  
        </div>
      </el-card>
    </div>
    </el-col>
    </el-row>
  </div>
</template>

<script>
import { GetAllDepartment ,GetHolidaySettingsPo,DeleteHolidaySettingsPo,AddHolidaySeason,AddSpecialWorkingDay,GetAnnualLeaveSetPo,UpdateAnnualLeaveSetPo} from "./AttendanceManagementApi";
export default {
  data() {
    return {
      depname:null,
      year1:2022,
      year2:2022,
      date:new Date().getFullYear() + '-' + 0 + (new Date().getMonth()+1) + '-' + new Date().getDate(),
      drop_down:[],
      tableData: [],
      tableData2:[],
      tableData3:[],
      options: [],
      isShow1: true, 
      isShow2: true,
    };
  },
  created() {
    this.GetAllDepartment();
    this.GetHolidaySettingsPo();
  
  },
  methods: {
     GetAllDepartment(){
      GetAllDepartment().then((res)=>{
      this.drop_down=res.data;
      var a=res.data;
         a.forEach(r => {
        this.depname=r;
        return;
      });
        this.GetAnnualLeaveSetPo();
      })
    },
    GetHolidaySettingsPo(){
      GetHolidaySettingsPo(this.year1).then((res)=>{
       this.tableData=res.data.data;
       this.tableData2=res.data.list;
      })
    },
    DeleteHolidaySettingsPo(id){
     DeleteHolidaySettingsPo(id).then((res)=>{
         if(res.data>0){
             alert("删除成功")
             this.GetHolidaySettingsPo();
         }
     })
    },
    AddHolidaySeason(){
         if(this.date.substr(0,4)!=this.year1){
             return;
         }
        AddHolidaySeason(this.date).then((res)=>{
            if(res.data>0){
                alert("添加成功")
                this.GetHolidaySettingsPo();
            }
        })
    },
     AddSpecialWorkingDay(){
         if(this.date.substr(0,4)!=this.year1){
             return;
         }
        AddSpecialWorkingDay(this.date).then((res)=>{
            if(res.data>0){
                alert("添加成功")
                this.GetHolidaySettingsPo();
            }
        })
    },
    GetAnnualLeaveSetPo(){
        GetAnnualLeaveSetPo(this.depname,this.year2).then((res)=>{
            this.tableData3=res.data;
        })
    },
    UpdateAnnualLeaveSetPo(){
        UpdateAnnualLeaveSetPo(this.tableData3).then((res)=>{
            if(res.data>0){
                alert("保存成功");
                this.GetAnnualLeaveSetPo();
            }
        })
    }
  },
};
</script>